import React from 'react'
import Alert from '@mui/material/Alert';
import { useDispatch, useSelector } from 'react-redux';
import { HIDE_TOAST } from '@/store/ActionType';

let timer: NodeJS.Timeout;

export default function Toast() {

    const dispatch = useDispatch()
    const { show, type, message } = useSelector((state: IRootState) => state.toastData)
    if (show) {
        // 做一个防抖
        clearTimeout(timer);
        timer = setTimeout(() => {
            dispatch({ type: HIDE_TOAST })
        }, 2000)
    }
    return (
        <div style={{ display: show ? 'block' : 'none', position: 'fixed', top: 0, left: 0, width: '100%' }}>
            <Alert severity={type}>{message}</Alert>
        </div>
    )
}
